<template>
	<div id="luckDraw">
		<div class="title-bar">
			<div class="left">
				<i class="pm-icon active-hot"></i>
				<span v-if="qualityNum == ''" class="active">0</span>
				<span v-else class="active" v-model="fireValue">{{fireValue}}</span>
			</div>
			<div class="lucky">
				<img src="../assets/images/home/active_lucky.png" alt="" />
			</div>
			<router-link to="MyPrize">
				<div class="right">
					<span>我的奖品</span>
				</div>
			</router-link>
		</div>
		<div class="content">
			<ul class="active-wrap">
				<li v-bind:class="'gift gift' + list[index]" v-for="(item,index) in prizeList" :data-prize_id="item.prize_id">
					<img :src="item.prize_img" alt="" @click="getLotteryDraw(item.prize_id)" />
				</li>
			</ul>
		</div>
		<div class="instructions" style="padding-bottom: 0;">
			<h2>抽奖说明</h2>
			<p>1、每人每天可投1票，投票后方可进行抽奖</p>
			<p>2、转发链接后可额外增加1次投票抽奖机会，每天最多可抽奖2次</p>
		</div>
		<div class="instructions">
			<h2>如何兑奖</h2>
			<p>中奖后，长按下方二维码或直接搜索L03715555添加客服微信，凭兑奖码进行奖品兑奖</p>
			<img src="../assets/images/home/active_kefu_qrcode.jpg" alt="" />
		</div>
		<x-dialog v-model="prizeAlert" class="dialog-demo" hide-on-blur>
			<div class="img-box">
				<img src="../assets/images/home/active_noprize.png" style="max-width:100%">
			</div>
			<div class="prize">
				<b>很遗憾未中奖...</b>
				<p>留点运气就是为了中大奖</p>
			</div>
		</x-dialog>
		<!--中奖弹框-->
		<x-dialog v-model="getPrizeAlert" class="dialog-demo" hide-on-blur>
			<div class="img-box">
				<img src="../assets/images/home/active_prize.png" style="max-width:100%">
			</div>
			<div class="prize-wrap">
				<img :src="lottery_prize.prize_img" alt="" />
				<div class="code">
					<span>兑奖码</span>
					<p>{{lottery_draw.draw_code}}</p>
				</div>
				<div class="desc">
					<b>好运已至，恭喜你抽中</b>
					<h2>{{lottery_prize.prize_title}}</h2>
					<p>{{lottery_prize.intro}}</p>
				</div>
			</div>
		</x-dialog>
		<alert v-model="show2" :title="title1" :content="title2" hide-on-blur></alert>
		<toast v-model="success" type="text" width="4.5rem">{{msg}}</toast>
		<bottom></bottom>
	</div>
</template>
<script>
	import bottom from './ActiveFooter'
	import { XHeader, XDialog, Toast, Alert } from 'vux'
	import $ from 'jquery'
	export default {
		data() {
			return {
				prizeList: [],
				qualityNum: '',
				flag: true,
				success: false,
				fireValue: '',
				lottery_draw: '',
				prize_num: '',
				multiple: '10',
				msg: '',
				list: ['1', '2', '3', '0', '99', '4', '7', '6', '5'],
				prizeAlert: false,
				getPrizeAlert: false,
				show2: false,
				title1: '',
				title2: '',
				lottery_id: '1',
				lottery_prize: '',
				stopStep: 0, //表示最终奖品位置
				runT: null, //转动方法
				step: -1, //计算转动的步数，控制转速和停止
				during: 2, //转速
			}
		},
		components: {
			XHeader,
			bottom,
			XDialog,
			Toast,
			Alert
		},
		mounted() {
			this.getLotteryDetail();
			this.getPrizeList();
			this.getQualify();
		},
		methods: {
			//获取活动奖项列表
			getPrizeList: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/lottery/prize_list.json?lottery_id=' + this.lottery_id
				}).then((result) => {
					this.prizeList = result.data.prize_list;
				}).catch((err) => {

				})
			},
			//
			getLotteryDetail: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/lottery/details.json?lottery_id=' + this.lottery_id
				}).then((result) => {
					if(result.data.code == 1) {}
				}).catch((err) => {

				})
			},
			//获取初始活力值  判断抽奖次数
			getQualify: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/lottery/qualify.json?lottery_id=' + this.lottery_id
				}).then((rst) => {
					if(rst.data.code == 1) {
						this.qualityNum = rst.data.data;
						this.fireValue = (this.qualityNum.draw_num - this.qualityNum.drawed_num) * this.multiple;
						console.log(this.fireValue);
					}
				}).catch((err) => {

				})
			},

			//点击抽奖
			getLotteryDraw: function(prize_id) {
				if(this.flag) {
					if(prize_id == 11) {
						this.step = -1;
						this.$http({
							method: 'GET',
							url: '/los/api/lottery/qualify.json?lottery_id=' + this.lottery_id
						}).then((rst) => {
							this.flag = false;
							this.fireValue = (rst.data.data.draw_num - rst.data.data.drawed_num) * this.multiple - 10;
							if(rst.data.code == 1 && rst.data.data.draw_num - rst.data.data.drawed_num > 0) {
								this.runT = setTimeout(this.startRoll);
								this.$http({
									method: 'GET',
									url: '/los/api/lottery/draw.json?lottery_id=' + this.lottery_id
								}).then((result) => {
									if(result.data.code == 1) {
										this.lottery_prize = result.data.data.lottery_prize;
										this.lottery_draw = result.data.data.lottery_draw;
										this.stopStep = this.lottery_prize.prize_id;
										this.prize_num = this.lottery_prize.prize_num;
									}
								}).catch((err) => {})
							} else {
								this.show2 = !this.show2;
								this.title1 = '呜~您的火力值已经消耗完';
								this.title2 = ' 请继续帮好友投票后再参与抽奖哦';
								this.flag = true;
							}
						}).catch((err) => {

						})
					}
				}
			},
			startRoll: function() {
				//设置转动多少圈
				var prizes_id = $(".gift" + (this.step % 8)).attr('data-prize_id');
				if(this.step >= 32 && this.stopStep == prizes_id) {
					$(".gift" + (this.step % 8)).css("border", "solid 2px #ff7e37");
					this.flag = true;
					if(this.prize_num == 0) {
						this.prizeAlert = !this.prizeAlert;
					} else {
						this.getPrizeAlert = !this.getPrizeAlert;
					}
					clearTimeout(this.runT);
					return;
				}
				if(this.step >= (24 + this.stopStep)) { //在即将结束转动前减速
					this.during += 1;
				} else {
					if(this.during <= 2) { //控制中间转速
						this.during = 2;
					}
					this.during--;
				}
				this.step++;
				$(".gift").css("border", "solid 2px #ffb376");
				console.log($(".gift" + (this.step % 8)).attr('data-prize_id'));
				$(".gift" + (this.step % 8)).css("border", "solid 2px #ff7e37");
				this.runT = setTimeout(this.startRoll, this.during * 100);
			},
			back: function() {
				window.history.go(-1);
			},
		}

	}
</script>
<style scoped lang="less">
	#luckDraw {
		background: #fff;
	}
	
	.selected {
		border: solid 1px #ff7e37;
	}
	
	.header {
		background: #fff;
	}
	
	.title-bar {
		padding-top: 0.77rem;
		overflow: hidden;
	}
	
	.title-bar .left {
		float: left;
		width: 1.73rem;
		height: 0.66rem;
		line-height: 0.66rem;
		background: #ff965c;
		border-top-right-radius: 0.33rem;
		border-bottom-right-radius: 0.33rem;
		overflow: hidden;
	}
	
	.title-bar .left i {
		margin: 0.13rem 0.13rem 0 0.34rem;
		float: left;
		width: 0.28rem;
		height: 0.37rem;
	}
	
	.title-bar .left span {
		float: left;
		color: #fff;
		font-size: 0.37rem;
	}
	
	.title-bar .lucky {
		float: left;
		width: 6.53rem;
		padding: 0 0.93rem;
		height: 1.09rem;
		margin-top: 0.45rem;
	}
	
	.title-bar .lucky img {
		width: 100%;
		height: 100%;
	}
	
	.title-bar .right {
		float: right;
		width: 1.73rem;
		height: 0.66rem;
		line-height: 0.66rem;
		background: #ff965c;
		text-align: center;
		color: #fff;
		border-top-left-radius: 0.33rem;
		border-bottom-left-radius: 0.33rem;
	}
	
	.title-bar .right span {
		font-size: 0.34rem;
	}
	
	#luckDraw .content {
		width: 8.5rem;
		height: 8.5rem;
		margin: 1.12rem 0.74rem;
		background: #ffc698;
		border-radius: 0.42rem;
		overflow: hidden;
	}
	
	#luckDraw .content .active-wrap {
		overflow-y: auto;
		padding: 0.14rem 0.16rem;
		border-radius: 0.42rem;
		background: #ffb376;
		margin: 0.45rem;
	}
	
	#luckDraw .content .gift {
		background-color: #fff;
		display: inline-table;
		width: 2.29rem;
		height: 2.29rem;
		text-align: center;
		background: #ffcea7;
		overflow: hidden;
		margin-right: 0.18rem;
		margin-bottom: 0.18rem;
		border-radius: 0.18rem;
		float: left;
	}
	
	#luckDraw .content .gift99 {
		width: 2.29rem;
		height: 2.29rem;
		background: #ffb376;
	}
	
	#luckDraw .content .gift99 img {
		width: 100%!important;
		height: 100%!important;
	}
	
	#luckDraw .content .gift:nth-child(3n) {
		margin-right: 0;
	}
	
	#luckDraw .content .gift:nth-child(7),
	#luckDraw .content .gift:nth-child(8),
	#luckDraw .content .gift:nth-child(9) {
		margin-bottom: 0;
	}
	
	#luckDraw .content .gift img {
		width: 2.18rem;
		height: 2.08rem;
		float: right;
	}
	
	.instructions {
		margin: 0 0.49rem;
		padding-bottom: 1.8rem;
		text-align: center;
	}
	
	.instructions h2 {
		font-size: 0.42rem;
		color: #777;
		text-align: center;
	}
	
	.instructions p {
		text-align: left;
		font-size: 0.37rem;
		color: #aaa;
		line-height: 0.58rem;
	}
	
	.instructions img {
		width: 2.8rem;
		height: 2.8rem;
	}
	
	.dialog-demo {
		position: relative;
	}
	
	.dialog-demo .prize {
		position: absolute;
		top: 5.12rem;
		color: #fff;
		width: 100%;
		text-align: center;
	}
	
	.dialog-demo .prize b {
		font-weight: normal;
		font-size: 0.37rem;
		display: block;
		margin-top: 1.12rem;
	}
	
	.dialog-demo .prize p {
		margin-top: 0.93rem;
		font-size: 0.42rem;
		color: #fff;
	}
	
	.dialog-demo .prize-wrap {
		position: absolute;
		top: 0;
		color: #fff;
		width: 100%;
		text-align: center;
	}
	
	.dialog-demo .prize-wrap img {
		width: 2.81rem;
		height: 1.69rem;
		margin-top: 1.46rem;
	}
	
	.dialog-demo .prize-wrap .code {
		color: #ff9358;
		margin-top: 0.2rem;
	}
	
	.dialog-demo .prize-wrap .code span {
		font-size: 0.4rem;
	}
	
	.dialog-demo .prize-wrap .code p {
		font-size: 0.53rem;
	}
	
	.dialog-demo .prize-wrap .desc {
		margin-top: 1.06rem;
	}
	
	.dialog-demo .prize-wrap .desc b {
		font-weight: normal;
		font-size: 0.4rem;
	}
	
	.dialog-demo .prize-wrap .desc h2 {
		font-size: 0.53rem;
		margin-top: 0.37rem;
	}
	
	.dialog-demo .prize-wrap .desc p {
		font-size: 0.37rem;
		opacity: 0.7;
		margin-top: 0.45rem;
	}
</style>